<template>
  <div class="web_server">
    <div class="nav" v-show="titleArr.length !== 1">
      <bread-crumb :titleArr = "titleArr"
                   @back = "returnMain" :fontSize="12"></bread-crumb>
    </div>
    <keep-alive>
      <!-- 组件在 vm.currentview 变化时改变！-->
      <component v-bind:is="currentView"
                 :ref="currentView"
                 @edit = "edit"
                 @onlineMsgBre = "showOnlineMsgBread"
                 @accessCode = "accessCode"
                 :webchatUrlIn.sync = "webchatUrl"
                 :accessId.sync = "accessId"
                 :configMessage = "onlineMessage"
                 @getWebchatList = "getWebchatList"
                 :webchatList = "number"></component>
    </keep-alive>
  </div>
</template>
<script>
  import breadCrumb from '@/components/ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import onlineMessage from './onlineMessage'
  import configDescription from './base/configDescription'
  import skillGroupList from './skillGroupList'
  export default {
    name: 'web_server',
    data () {
      return {
        currentView: 'skillGroupList',
        titleArr: ['网站/WAP/H5客服账号管理'],
        accessId: '',
        webchatUrl: '',
        onlineMessage: {},
        number: 0,
        isAdd: true
      }
    },
    components: {
      configDescription,
      onlineMessage,
      skillGroupList,
      breadCrumb
    },
    methods: {
      getWebchatList (val) {
        this.returnMain(val)
      },
      // 控制面包屑的显示字段，传入需要渲染的数据
      edit (obj) {
        this.$store.dispatch('getDicCache', {type: 'mailQueues'}).then((res) => {
          if (res && res.success) {
            if (res.data.length <= 0) {
              this.$message.error('您还没设置技能组，请先到【渠道技能组】添加技能组!')
              return
            }
            if (obj) {
              this.titleArr.splice(1, 2, '修改网站接入', obj.name)
              this.onlineMessage = obj
            } else {
              this.titleArr.splice(1, 2, '添加网站接入')
              this.onlineMessage = {}
              this.isAdd = false
            }
            this.currentView = 'onlineMessage'
          }
        })
      },
      // 基本设置跳转进窗口样式设置的面包屑处理
      showOnlineMsgBread (name) {
        if (this.titleArr.length === 3) {
          this.titleArr.push(name)
        } else {
          this.titleArr.splice(3, 1, name)
        }
      },
      accessCode (webchatUrl, accessId, name) {
        this.currentView = 'configDescription'
        this.titleArr.splice(1, 2, '接入代码', name)
        this.webchatUrl = webchatUrl
        this.accessId = accessId
      },
      returnMain (val) {
        if (val && val === 'isAdd') {
          this.currentView = 'skillGroupList'
          this.titleArr = ['网站/WAP/H5客服账号管理']
          this.isAdd = true
          // 为了返回主界面能刷新一下设定的，没有好的其他办法
          this.number = Math.random()
        }
        if (this.currentView === 'onlineMessage') {
          if (this.titleArr.length === 4) {
            this.$refs.onlineMessage.backToBasic()
            this.titleArr.splice(3, 1)
          } else {
            let last = this.titleArr[this.titleArr.length - 1]
            if (last === '窗口样式设置' || last === '邀请框样式设置') {
              this.$refs.onlineMessage.backToBasic()
              this.titleArr.splice(this.titleArr.length - 1, 1)
            } else {
              this.currentView = 'skillGroupList'
              this.titleArr = ['网站/WAP/H5客服账号管理']
              this.isAdd = true
              // 为了返回主界面能刷新一下设定的，没有好的其他办法
              this.number = Math.random()
            }
          }
        } else {
          this.currentView = 'skillGroupList'
          this.titleArr = ['网站/WAP/H5客服账号管理']
          this.isAdd = true
          // 为了返回主界面能刷新一下设定的，没有好的其他办法
          this.number = Math.random()
        }
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  // @import "../../../../../../assets/common.styl"
</style>
